<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="root">
        <p>{{name}}</p>
        <p>{{age}}</p>
    </div>

    <script>
        // 1.拿到模板,数据  2.模板和数据结合得到的就是HTML元素 3.渲染到页面
        let data = {
            name: "dushenyan",
            age: 21
        }

        var tmpNode = document.getElementById('root')
        var reg = /\{\{(.+?)\}\}/;
        // 数据放入模板 使用节点递归  利用模板生成一个需要被渲染的HTMl标签
        // vue源码实现  DOM=>字符串模板=>VNode=> 真正DOM
        function render(template, data) {
            var childNodes = template.childNodes; //取子元素
            for (let i = 0; i < childNodes.length; i++) {
                let type = childNodes[i].nodeType;
                if (type === 3) {
                    let txt = childNodes[i].nodeValue; //取出文本 有才能取出

                    //匹配花括号
                    txt = txt.replace(reg, function (_, g) { //使用正则匹配一次 函数就会调用一次
                        let key = g.trim(); //花括号里面的值
                        let value = data[key];

                        return value;
                    })

                    childNodes[i].nodeValue = txt; //目前txt和DOM元素不存在关系

                } else if (type === 1) {
                    render(childNodes[i], data)
                }
            }
        }

        var generateNode = tmpNode.cloneNode(true)
        render(tmpNode, data)

        console.log(root)

        // 遗留  vue中使用虚拟DOM 只考虑单属性 层级属性没考虑 代码没整合

    </script>
</body>

</html>